<template>
	<view class="page" :style="{height: height+'px'}">
        <canvas class="canvas" canvas-id="myCanvas"></canvas>
        <view class="btn" @tap="_creatQrcode">
        	<uni-icon type="download" color="#fff"></uni-icon>
        </view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import qrcode from '@/components/qrcode/qrcode.vue';
    
	import QR from '@/components/qrcode/qrcode.js';
    
    let sysInfo = uni.getSystemInfoSync();
	export default {
		components: {
            uniIcon,
            qrcode
		},
		data() {
			return {
                height: sysInfo.windowHeight,
                width: sysInfo.windowWidth,
				img: '',
				url: '',
				imgSize: 200
			};
		},
        onLoad() {
        	this.url = "https://www.baidu.com";
        },
        onReady(){
            this.creatQrcode();
        },
        methods: {
			creatQrcode() {
				let val = this.url + '';
				if (!val) {
					return;
				}
				let img = QR.createQrCodeImg(val, {
					size: parseInt(this.imgSize)
				});
				this.img = img;
                this.getImageInfo();
			},
            getImageInfo(){
				var _this = this;
				// 将图片写入画布
				const ctx = uni.createCanvasContext('myCanvas');
				ctx.drawImage('../../../static/img/loginBack.png', 0, 0, _this.width, _this.height);
                let left = (_this.width - _this.imgSize) / 2;
				ctx.drawImage(_this.img , left, 80, _this.imgSize, _this.imgSize);
                ctx.draw(true, () => {
//                     uni.canvasToTempFilePath({
//                     	x: canvasL,
//                     	y: canvasT,
//                     	width: canvasW,
//                     	height: canvasH,
//                     	destWidth: canvasW,
//                     	destHeight: canvasH,
//                     	quality: 0.5,
//                     	canvasId: 'myCanvas',
//                     	success: function (res) {
//                     		uni.hideLoading()
//                     		// 成功获得地址的地方
//                     		uni.previewImage({
//                     			current: '', // 当前显示图片的http链接
//                     			urls: [res.tempFilePath] // 需要预览的图片http链接列表
//                     		})
//                     	}
//                     });
                });
            },
        	_creatQrcode() {
//                 this.url = "https://uniapp.dcloud.io/api/canvas/createCanvasContext";
//                 this.creatQrcode();
                var _this = this;
                uni.showLoading({
                	title: '图片生成中...',
                });
        	}
        },
	}
</script>

<style lang="scss">
    .page{
        position: relative;
    }
    
    .canvas{
        display: block;
        height: 100%;
        width: 100%;
    }
    
    .code{
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .btn{
        position: fixed;
        right: 32upx;
        bottom: 32upx;
        background-color: #ccc;
        width: 64upx;
        height: 64upx;
        line-height: 64upx;
        border-radius: 100%;
        text-align: center;
    }
</style>
